<template>
  <view>
    <uni-popup ref="chat" type="bottom">
      <view class="chat-wrap" :class="{'chat-wrap-footer':publicFooter}">
        <view class="title text-center fs-34 mb-40">
          客服服务
        </view>
        <view class="chat-box" >
          <view class="item mr-20" @click="callPhone">
            <image src="https://qn.ebaozu.cn/public/mini/kefu/%E5%AE%A2%E6%9C%8D%E7%94%B5%E8%AF%9D.png" class="l"></image>
            <view class="c">
              <view>客服电话</view>
              <view class="fs-mini text--w111-999 mt-6">
                拨打客服热线
              </view>
            </view>
            <text class="iconfont icon-ic_rightarrow fs-24 text--w111-999 pl-8"></text>
          </view>
          <view class="item" @click="toChat"  v-if="customer_type!=1">
            <image src="https://qn.ebaozu.cn/public/mini/kefu/%E5%9C%A8%E7%BA%BF%E5%AE%A2%E6%9C%8D.png" class="l"></image>
            <view class="c">
              <view>在线客服</view>
              <view class="fs-mini text--w111-999 mt-6">实时与您沟通</view>
            </view>
            <text class="iconfont icon-ic_rightarrow fs-24 text--w111-999 pl-8"></text>
<!--            蚂蚁智能客服-->
            <alipayChat v-if="customer_type==3"></alipayChat>
          </view>
        </view>
        <view class="fs-regular mb-32 text--w111-999 text-center" v-if="service.service_time.start_time">{{service.service_time.start_time}}</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import alipayChat from "@/components/alipayChat/index.vue";
import {getHelpInfo} from "@/api/kefu";
import { mapGetters } from "vuex";

export default {
  components: {alipayChat},
  data() {
    return {
      service:'',
      customer_type:'',
      publicFooter:false,
      chat:{}
    }
  },
  mounted() {
    // this.open()
    this.getHelpInfo()
  },
  computed:{
    ...mapGetters(['userInfo', 'cartNum', 'isLogin'])
  },
  methods: {
    open() {
      this.$refs.chat.open()
      console.log('getApp().globalData.publicFooter',getApp().globalData.publicFooter)
      this.publicFooter=getApp().globalData.publicFooter
    },
    getHelpInfo(){
      getHelpInfo({
        flag:'all'
      }).then(res=>{
        this.service=res.data.service
        this.customer_type=res.data.customer_type
        this.chat=res.data.chat
      })
    },
    callPhone() {
      let that=this
      // 对话框，是否拨打电话
      uni.showModal({
        title: '是否拨打客服电话？',
        success: function (res) {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: that.service.service_phone,
              complete: (res) => {
                console.log(res);
              }
            });
          }
        }
      });
    },
    toChat() {
      // 蚂蚁客服
      if(this.customer_type==3) return
      // 循环经济智能助理客服
      if(this.customer_type==4) {
        const targetUrl = this.chat.service_url;
        my.ap.openURL({
          "url": targetUrl,
          "fail": (res) => {
            my.showToast({
              content: '跳转失败'
            });
          }
        });
        return
      }

      let userInfo = {}
      if(typeof this.userInfo === 'string'){
        userInfo = JSON.parse(this.userInfo)
      }else{
        userInfo = this.userInfo
      }
      // 未登录-跳转离线客服
      if(!this.isLogin){
        uni.navigateTo({
          url: '/pages/extension/customer_list/feedback'
        });
        return
      }
      let url = `/pages/extension/customer_list/chat?productId=${this.id}`
      this.$util.getCustomer(userInfo,url)
    },
  }
}
</script>

<style lang="scss" scoped>
.chat-wrap-footer{
  padding-bottom: 100rpx !important;
}
.chat-wrap{
  background-color: #f5f5f5;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx 20rpx 20rpx;
}
.chat-box{
  display: flex;
  .item{
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
    //width: 50%;
    padding:30rpx 20rpx;
    margin-bottom: 20rpx;
    background: #fff;
    border-radius: 20rpx;
    position: relative;
    .l{
      width: 80rpx;
      height: 80rpx;
    }
    .c{
      padding: 0 20rpx;
    }
    /deep/contact-button{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 10;
    }
  }
}
</style>